<template>
  <h1>一个人的信息</h1>
  <h2>{{ name }}</h2>
  <h2>{{ age }}</h2>
  <h2>{{ sex }}</h2>
  <button @click="sayHello">你好</button>
  <button @click="sayWelcome">欢迎</button>
  <button @click="test1">test1</button>
  <button @click="test2">test2</button>
</template>

<script>
// import { h } from "vue";

export default {
  name: "App",
  data() {
    return {
      sex: "男",
    };
  },
  methods: {
    sayWelcome() {
      alert("欢迎");
    },
    test1() {
      console.log(this.name);
    },
    /* test2() {
      console.log(this.sex);
    } */
  },
  // 此处只是测试一下setup，暂时不考虑响应式
  setup() {
    let name = "张三";
    let age = 18;
    // let sex = "女";

    function sayHello() {
      alert(`你好，我叫${name}，我${age}岁了`);
    }

    function test2() {
      console.log(this.sex); // undefined
    }

    // 模板里直接使用
    return {
      name,
      age,
      // eslint-disable-next-line
      // sex,
      sayHello,
      test2,
    };

    // return () => h("h1", "你好");
  },
};
</script>
